<template>
<div class="card">
    <header>
        <img class="avatar" width="40" height="40" src="images/1.jpg">
        <p class="name">{{ package.name }}</p>
    </header>
    <footer>
        <!--        <input class="search" type="text" v-model="search" placeholder="search user..." @keyup="onKeyup">-->
    </footer>
</div>
</template>

<script>
    export default {
        data : function(){
          return {
              search : ''
          }
        },
        props : {
            package : Object
        },
        methods: {
            onKeyup (e) {
                this.$parent.search(this.search);
            }
        }
    };
</script>

<style scoped lang="less">
.card {
    padding: 12px;
    border-bottom: solid 1px #24272C;

    footer {
        margin-top: 10px;
    }

    .avatar, .name {
        vertical-align: middle;
    }
    .avatar {
        border-radius: 2px;
    }
    .name {
        display: inline-block;
        margin: 0 0 0 15px;
        font-size: 16px;
    }
    .search {
        padding: 0 10px;
        width: 100%;
        font-size: 12px;
        color: #fff;
        height: 30px;
        line-height: 30px;
        border: solid 1px #3a3a3a;
        border-radius: 4px;
        outline: none;
        background-color: #26292E;
    }
}
</style>